<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选和反选</title>
		<style>
			table{
				width: 240px;
				height: 150px;
				margin:10% auto;
				border-collapse: collapse;
				border-spacing: 0;
				background-color: aliceblue;
			}
			th{
				height: 25px;
				text-align: center;
				background-color: deepskyblue;
				border: 1px solid white;
			}
			td{
				border: 1px solid white;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" name="choice" onclick="allchoice()"/></th>
					<th>
						菜名
					</th>
					<th>饭店</th>
				</tr>
			</thead>
	
			<tbody>
				<tr>
					<td><input type="checkbox" name="choice" onclick="everyclick()"/></td>
					<td>地三鲜</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" onclick="everyclick()"/></td>
					<td>西红柿鸡蛋</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="choice" onclick="everyclick()"/></td>
					<td>醋溜土豆丝</td>
					<td>田老师</td>
				</tr><tr>
					<td><input type="checkbox" name="choice" onclick="everyclick()"/></td>
					<td>萝卜干炒黄豆</td>
					<td>田老师</td>
				</tr>
			</tbody>
		</table>
		<script>

			var allArr = document.getElementsByName("choice");

			function allchoice(){
				if(allArr[0].checked){
						for(i=1;i<allArr.length;i++)
						{
							allArr[i].checked = true;
						}
					}
				else{
					for(i=1;i<allArr.length;i++)
						{
							allArr[i].checked = false;
						}
				}
			}
			
			function everyclick(){
				var j=0;
				for(i=1;i<allArr.length;i++){
					if(allArr[i].checked){
						j++;
					}
				}
				if(j==4){
					allArr[0].checked = true;
				}
				else{
					allArr[0].checked = false;
				}
			}
		
		</script>
	</body>
</html>
